import React, { Component, PropTypes } from 'react';
import $ from "jquery";
import action from '../../../Action/Index';
import ListItem1 from './ListItem1';
import ListItem2 from './ListItem2';
import ListItem3 from './ListItem3';

class List extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isAction: false
        }
        this.toggleFising = () => {
            this.setState({ isAction: !this.state.isAction });
            $('.js_classify_pull').toggle('5000');
        }
    }

    render() {
        const {list1, list2, unreadGroupCount, dispatch} = this.props;
        const classify = list2.classify;
        const groupitemload = list2.groupitemload;
        const isAction = this.state.isAction;
        return (
            <section>
                <div className="servic-render servic-render__2">
                    <div className="render-tit render__nav">
                        <nav className="render-tabel" id="showRender">
                            {
                                list1.slice(0, 4).map((item, index) => {
                                    return <ListItem1 key={item.id} dispatch={dispatch} {...item} />
                                })
                            }
                        </nav>
                        <div className="tit-down" onClick={this.toggleFising}>
                            <i className={!isAction ? "down__icon down_icon__png" : "down__icon down_icon__png down"}></i>
                        </div>
                    </div>
                    <div className="render-tit-pull js_classify_pull">
                        <nav className="render-tabel-pull">
                            {
                                list1.slice(4).map((item, index) => {
                                    return <ListItem2 key={item.id} dispatch={dispatch} {...item} />
                                })
                            }
                        </nav>
                    </div>
                    <ul className="mui-table-view mui-grid-view mui-table-view-border render-table" id="J_Classifys">

                        {
                            groupitemload.map((item, index) => {
                                return <ListItem3 key={item.id}  {...item} />
                            })
                        }
                    </ul>
                </div>
            </section>
        );
    }
}

export default List;